<template>
  <div class="ageCharts">
    <!-- 年龄比例分布图 -->
    <div class="title">
       <p>年龄比例</p>
       <img src="../../images/dataScreen-title.png" alt="图片地址已失效">
     </div>
     <!-- 显示饼图的区域↓ -->
     <div class="pieChart" ref="refForPieChart"></div>
  </div>
</template>

<script lang="ts" setup name="Age">
import { ref,onMounted } from 'vue'
import * as echarts from 'echarts'
let refForPieChart = ref() // 定义一个ref对象，用于存放饼图所在的DOM元素
// 在组件挂载完毕时初始化图表↓
onMounted(()=>{
  let instanceOfPieChart = echarts.init(refForPieChart.value)
  let option = {
  tooltip: {
    trigger: 'item'
  },
  legend: { // 图例组件
    top: 40, // 单位为px
    right: 30,
    textStyle:{
      color: 'white',
      fontSize: 14,
    },
    orient: 'vertical', //设置图例组件的方向。默认为水平方向（horizontal），可选值为'horizontal', 'vertical'（竖直方向）
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: true,
        position: 'inside',
        color:'white'
      },      
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: '军事' },
        { value: 735, name: '新闻' },
        { value: 580, name: '娱乐' },
        { value: 484, name: '直播' },
        { value: 300, name: '财经' },
      ]
    }
  ],
  // 布局配置项↓
  grid:{ // 这些配置可以让图表与挂载点所在元素的宽高保持一致，从而让图表充满整个挂载点所在元素
      left:0,
      right:0,
      top:0,
      bottom:0,
  },
};
instanceOfPieChart.setOption(option)
})
</script>

<style scoped lang="scss">
.ageCharts {
  width: 100%;
  height: 100%;
  background-color: red;
  background: url(../../images/dataScreen-main-lb.png) no-repeat;
  background-size: 100% 100%;
  .title{
    margin-left: 20px;
    p{
      color: white;
      font-size: 20px;
    }
  }
  .pieChart{
    height: 260px;
  }
}
</style>